<template>
  <div>
    <el-card style="padding: 18px;">
      <el-row style="margin-bottom: 20px;">
        <el-button type="primary" @click="add">添加工作模式</el-button>
      </el-row>
      <!-- biaoge -->
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
      >
        <el-table-column
          prop="id"
          label="工作模式编号"
        />
        <el-table-column
          prop="name"
          label="工作模式"
        />
        <el-table-column
          prop="workPatternType"
          label="类型 "
        >
          <template v-slot="{row}">
            <span v-if="row.workPatternType===1">礼拜制</span>
            <span v-else>连续制</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="workDate"
          label="工作日期 "
        />
        <el-table-column
          prop="workEndMinute1"
          label="工作时间 "
        >
          <template v-slot="{row}">
            <span>{{ (row.workEndMinute1/60).toFixed(2) +'小时' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="workPatternType"
          label="操作 "
        >
          <template v-slot="{row}">
            <el-button class="operate" style="color: #419eff;" @click="update(row)">编辑</el-button>
            <span>|</span>
            <el-button class="operate" style="color: #f66c9a;" @click="del(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-row type="flex" justify="center" style="margin-top: 20px;">
        <el-pagination
          :page-sizes="[10, 20, 30, 40]"
          :page-size="params.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </el-card>
    <!-- 模态框 -->
    <SortModel :id="id" :visible.sync="dialogVisible" :type="type" />
  </div>
</template>

<script>
import { getSort } from '@/api/workforce'
import SortModel from './components/sortModel'
export default {
  components: {
    SortModel
  },
  data() {
    return {
      tableData: [],
      id: NaN,
      type: NaN,
      params: {
        page: 1,
        pageSize: 10
      },
      total: 1,
      dialogVisible: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      const { data } = await getSort(this.params)
      this.total = +data.counts
      this.tableData = data.items
    },
    // 每页显示条数发生改变时
    handleSizeChange(page) {
      this.params.pageSize = page
      this.getList()
    },
    // 点击与回车分页
    handleCurrentChange(page) {
      this.params.page = page
      this.getList()
    },
    async del(id) {
      await this.$confirm('是否删除该数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      this.$message.error('系统数据不允许删除')
    },
    update(row) {
      this.type = NaN
      this.dialogVisible = true
      this.id = row.id
      this.type = row.workPatternType
    },
    add() {
      this.dialogVisible = true
      this.id = NaN
    }
  }

}
</script>

<style scoped lang="scss">
.operate {
  background-color: transparent;
    border: none;
    color:#419eff ;
}
::v-deep .el-dialog__header{
    background-color: #f3f4f7;
}
::v-deep .el-dialog__body{
    padding: 30px 50px;
}
::v-deep .el-dialog__footer{
    text-align: center;
}
::v-deep .is-active{
    color: #000;
    font-size: 16px;
    font-weight: 700;
}
::v-deep .el-form-item{
    padding: 0 15px;
}
</style>
